<template>
  <div class="add_subject">
    <a-card :title="title" :bordered="false" style="width: 1200px">
      <div class="container">
        <a-form-model
          ref="ruleForm"
          layout="vertical"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-row :gutter="20">
            <a-col :span="12">
              <a-form-model-item label="项目名称" prop="tproject.name">
                <a-input v-model="form.tproject.name" placeholder="请输入项目名称" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="所属项目集" prop="tproject.setId">
                <a-select v-model="form.tproject.setId" placeholder="请选择所属项目集">
                  <a-select-option v-for="(item, index) in projectPortfolioList" :key="index" :value="item.setId">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="项目描述">
                <template>
                  <div style="border: 1px solid #ccc">
                    <Toolbar
                      style="border-bottom: 1px solid #ccc"
                      :editor="editor"
                      :defaultConfig="toolbarConfig"
                      :mode="mode"
                    />
                    <Editor
                      style="height: 240px; overflow-y: hidden"
                      v-model="form.tproject.description"
                      :defaultConfig="editorConfig"
                      :mode="mode"
                      @onCreated="onCreated"
                    />
                  </div>
                </template>
              </a-form-model-item>
            </a-col>
            <a-divider orientation="left"></a-divider>
            <a-col :span="12">
              <a-form-model-item label="委托方名称">
                <a-input v-model="form.moreInfo.clientName" placeholder="请输入委托方名称" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="委托方地址">
                <a-input v-model="form.moreInfo.clientAds" placeholder="请输入委托方地址" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="委托方联系人">
                <a-input v-model="form.moreInfo.clientContacts" placeholder="请输入委托方联系人" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="委托方联系电话" prop="moreInfo.clientTel">
                <a-input v-model="form.moreInfo.clientTel" placeholder="请输入委托方联系电话" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="研制方名称">
                <a-input v-model="form.moreInfo.manufacturerName" placeholder="请输入研制方名称" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="研制方地址">
                <a-input v-model="form.moreInfo.manufacturerAds" placeholder="请输入研制方地址" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="研制方联系人">
                <a-input v-model="form.moreInfo.manufacturerContacts" placeholder="请输入研制方联系人" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="研制方联系电话" prop="moreInfo.manufacturerTel">
                <a-input v-model="form.moreInfo.manufacturerTel" placeholder="请输入研制方联系电话" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="测评机构名称">
                <a-input v-model="form.moreInfo.evaluationAgencyName" placeholder="请输入测评机构名称" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="测评机构地址">
                <a-input v-model="form.moreInfo.evaluationAgencyAds" placeholder="请输入测评机构地址" />
              </a-form-model-item> </a-col
            ><a-col :span="12">
              <a-form-model-item label="测评机构联系人">
                <a-input v-model="form.moreInfo.evaluationAgencyContacts" placeholder="请输入测评机构联系人" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="测评机构联系电话" prop="moreInfo.evaluationAgencyTel">
                <a-input v-model="form.moreInfo.evaluationAgencyTel" placeholder="请输入测评机构联系电话" />
              </a-form-model-item>
            </a-col>
            <a-divider orientation="left"></a-divider>
            <a-col :span="12">
              <a-form-model-item label="测试项目名称">
                <a-input v-model="form.tproject.reserved1" placeholder="请输入测试项目名称" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="测试项目标识">
                <a-input v-model="form.tproject.identifier" placeholder="请输入测试项目标识" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="行业类型">
                <a-select v-model="form.tproject.industryRank" placeholder="请选择行业类型">
                  <a-select-option v-for="(item, index) in industryList" :key="index" :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="被测软件类型">
                <a-select v-model="form.tproject.softRank" placeholder="请选择被测软件类型">
                  <a-select-option v-for="(item, index) in testedSoftwareList" :key="index" :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="测评项目类型">
                <a-select v-model="form.tproject.testSoftRank" placeholder="请选择测评项目类型">
                  <a-select-option v-for="(item, index) in evaluationProjectList" :key="index" :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="被测软件密级">
                <a-select v-model="form.tproject.softSecurityClassification" placeholder="请选择被测软件密级">
                  <a-select-option
                    v-for="(item, index) in testedSoftwareConfidentialityList"
                    :key="index"
                    :value="item.value"
                  >
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
        <a-affix :offset-bottom="0" @change="affixChange">
          <div class="btn_group" :class="{ affixCss: isAffix }">
            <a-button type="primary" style="background: #3883fa; border-color: #3883fa" @click="onSubmit">
              保存
            </a-button>
            <a-button style="margin-left: 10px" @click="goBack"> 返回 </a-button>
          </div>
        </a-affix>
      </div>
    </a-card>
  </div>
</template>
<script>
import {
  getProjectList,
  addSubjectChild,
  getDictByCode,
  querySubjectById,
  editSubject,
} from '@/api/subject/stManager.js'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
  name: 'addSubject',
  components: { Editor, Toolbar },
  inject: ['closeCurrent'],
  data() {
    let validateMobile = (rule, value, callback) => {
      if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value) || new RegExp(/^\d{3}-\d{7,8}|\d{4}-\d{7,8}$/).test(value) || new RegExp(/^\d{3}\d{7,8}|\d{4}-\d{7,8}$/).test(value)) {
        callback()
      } else {
        callback('您的手机号码格式不正确!')
      }
    }
    return {
      id: null,
      title: '新增项目',
      whetherValid: null,
      contentId: null,
      isAffix: '',
      rules: {
        'tproject.name': [{ required: true, message: '请输入项目名称', trigger: 'change' }],
        'tproject.setId': [{ required: true, message: '请选择所属项目集', trigger: 'change' }],
        'moreInfo.clientTel': [{ validator: validateMobile, trigger: 'change' }],
        'moreInfo.manufacturerTel': [{ validator: validateMobile, trigger: 'change' }],
        'moreInfo.evaluationAgencyTel': [{ validator: validateMobile, trigger: 'change' }],
      },
      form: {
        tproject: {
          name: '', //项目名称
          setId: undefined, //所属项目集
          description: '', //项目描述
          reserved1: '', //测试项目名称
          identifier: '', //测试项目标识
          industryRank: undefined, //行业类型
          softRank: undefined, //被测软件类型
          testSoftRank: undefined, //测评项目类型
          softSecurityClassification: undefined, //被测软件密级
        },
        moreInfo: {
          clientName: '', //委托方名称
          clientAds: '', //委托方地址
          clientContacts: '', //委托方联系人
          clientTel: '', //委托方联系电话
          manufacturerName: '', //研制方姓名
          manufacturerAds: '', //研制方地址
          manufacturerContacts: '', //研制方联系人
          manufacturerTel: '', //研制方联系电话
          evaluationAgencyName: '', //测评机构名称
          evaluationAgencyAds: '', //测评机构地址
          evaluationAgencyContacts: '', //测评机构联系人
          evaluationAgencyTel: '', //测评机构联系电话
        },
      },
      labelCol: { span: 24 },
      wrapperCol: { span: 24 },
      projectPortfolioList: [],
      industryList: [],
      testedSoftwareList: [],
      evaluationProjectList: [],
      testedSoftwareConfidentialityList: [],
      editor: null,
      toolbarConfig: {
        excludeKeys: ['group-image', 'group-video', 'fullScreen', 'emotion', 'codeBlock', 'code'],
      },
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'default', // or 'simple'
    }
  },
  mounted() {
    this.id = this.$route.query.id
    if (this.$route.query.id) {
      this.title = '修改项目'
      this.getDetail()
    }
    this.getAffiliationProjectList()
    //行业类型
    this.getDictData('industry_type')
    //被测软件类型
    this.getDictData('soft_security_class')
    //测评项目类型
    this.getDictData('test_soft_rank_type')
    //测试软件密级
    this.getDictData('test_soft_pass_level')
  },
  methods: {
    getDetail() {
      querySubjectById({ id: this.id }).then((res) => {
        let data = res.result
        this.whetherValid = data.whetherValid
        this.contentId = data.contentId
        this.form.tproject.name = data.name
        this.form.tproject.setId = data.setId
        this.form.tproject.description = data.description
        this.form.tproject.reserved1 = data.reserved1
        this.form.tproject.identifier = data.identifier
        this.form.tproject.softRank = data.softRank
        this.form.tproject.industryRank = data.industryRank
        this.form.tproject.testSoftRank = data.testSoftRank
        this.form.tproject.softSecurityClassification = data.softSecurityClassification
        this.form.moreInfo = JSON.parse(data.text)
      })
    },
    //获取字典数据
    getDictData(code) {
      getDictByCode({ code: code }).then((res) => {
        if (code === 'industry_type') {
          this.industryList = res.result
        } else if (code === 'soft_security_class') {
          this.testedSoftwareList = res.result
        } else if (code === 'test_soft_rank_type') {
          this.evaluationProjectList = res.result
        } else if (code === 'test_soft_pass_level') {
          this.testedSoftwareConfidentialityList = res.result
        }
      })
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    getAffiliationProjectList() {
      getProjectList().then((res) => {
        if (res.code === 200) {
          this.projectPortfolioList = res.result
        }
      })
    },
    affixChange(status) {
      this.isAffix = status
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // const reg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/
          // if (this.form.moreInfo.clientTel) {
          //   if (!reg.test(this.form.moreInfo.clientTel)) {
          //     this.$message.error('请输入正确格式委托方联系电话')
          //     return
          //   }
          // }
          // if (this.form.moreInfo.manufacturerTel) {
          //   if (!reg.test(this.form.moreInfo.manufacturerTel)) {
          //     this.$message.error('请输入正确格式研制方联系电话')
          //     return
          //   }
          // }
          // if (this.form.moreInfo.evaluationAgencyTel) {
          //   if (!reg.test(this.form.moreInfo.evaluationAgencyTel)) {
          //     this.$message.error('请输入正确格式测评机构联系电话')
          //     return
          //   }
          // }
          let params = {
            tproject: this.form.tproject,
            tsysContent: {
              name: '项目信息',
              title: this.form.tproject.name,
              text: JSON.stringify(this.form.moreInfo),
              contentType: 'json',
              contentId: this.contentId,
              projectId: this.id,
            },
          }
          if (this.id) {
            params.tproject.projectId = this.id
            params.tproject.whetherValid = this.whetherValid
            editSubject(params).then((res) => {
              if (res.code == 200) {
                this.$message.success('修改成功')
                this.$router.push({ path: '/subject/stManager' })
                this.closeCurrent()
              }
            })
          } else {
            addSubjectChild(params).then((res) => {
              if (res.code == 200) {
                this.$message.success('新增成功')
                this.$router.push({ path: '/subject/stManager' })
                this.closeCurrent()
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    goBack() {
      this.closeCurrent()
      this.$router.push({ path: '/subject/stManager' })
    },
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="less" scoped>
.add_subject {
  display: flex;
  align-items: center;
  justify-content: center;

  ::v-deep .ant-card {
    border-radius: 4px;
  }

  ::v-deep .ant-card-head {
    padding: 0 120px;
  }

  ::v-deep .ant-card-head-title {
    color: #30394a;
    font-size: 16px;
    font-weight: 700;
  }

  ::v-deep .ant-card-body {
    padding: 12px 16px;

    .container {
      margin: 0 104px;
    }
  }

  ::v-deep .ant-form label,
  ::v-deep .ant-input,
  ::v-deep .ant-form-item,
  ::v-deep .ant-form-explain,
  ::v-deep .ant-form-extra {
    font-size: 13px;
  }

  ::v-deep .ant-divider-inner-text {
    font-size: 13px;
  }

  ::v-deep .ant-form-item {
    margin-bottom: 12px;
  }

  .btn_group {
    text-align: center;
    padding: 16px 0;

    ::v-deep .ant-btn {
      padding: 0 30px;
    }
  }

  .affixCss {
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid rgb(235, 237, 243);
  }
}
</style>
